<template>
  <div class="card-container">
    <slot />
    <div class="box-container">
      <div
        v-for="(item, index) in packages"
        :key="index"
        class="package-card"
        :style="{ background: discount === 0 ? 'rgb(255, 77, 79)' : '#fff', color: discount === 0 ? '#fff' : 'black' }"
      >
        <div class="card-content">
          <p class="title" :style="{ color: discount !== 0 ? 'rgb(255, 77, 79)' : '' }">
            {{ item.title }}
          </p>
          <p class="original-price" v-if="item.remark">
            {{ item.remark }}
          </p>
          <p class="original-price" v-else>
            赠送{{
              currentPackage.id === 26 || currentPackage.id === 31
                ? currentPackage.giftNumber / 2
                : currentPackage.giftNumber
            }}

            个{{ words }}5热度词
          </p>
          <p class="discount-price" v-if="item.id === 1">价值：{{ currentPackage.giftNumber * 1000 }}元</p>
          <p class="discount-price" v-else>价值：{{ item.price }}元</p>
          <p class="discount-price" v-if="item.duration">
            赠送时长：
            <b>{{ item.duration }}天</b>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
console.log(router, '路由s')

interface Props {
  currentPackage: any
  discount: Number
}

const props = withDefaults(defineProps<Props>(), {
  currentPackage: () => {},
  discount: () => 0
})
// 定义套餐数据的类型
interface PackageItem {
  id: number
  title: string
  remark?: string
  price: number
  duration?: number
}

// 套餐数据数组
const packages = computed(() => {
  const allPackages: PackageItem[] = [
    {
      id: 1,
      title: '新客优享',
      price: 2000
    },
    {
      id: 2,
      title: '新客优享',
      remark: '赠送高级样式配图',
      price: 2000
    },
    {
      id: 3,
      title: '新客优享',
      remark: '赠送360平台',
      price: 3000,
      duration: 365
    }
  ]

  // 当路由为 /price-package-sd 时，过滤掉 id 为 3 的套餐
  if (router.currentRoute.value.path === '/price-package-sd') {
    return allPackages.filter((pkg) => pkg.id !== 3)
  }

  return allPackages
})

const words = computed(() => {
  const pcIds = [24, 27, 29, 32]
  const mobileIds = [25, 28, 30, 33]
  const dualIds = [26, 31]

  let remark = '电脑端'
  const id = props.currentPackage.id

  if (mobileIds.includes(id)) {
    remark = '移动端'
  } else if (dualIds.includes(id)) {
    remark = '双端'
  } else if (pcIds.includes(id)) {
    remark = '电脑端'
  }

  return remark
})
</script>

<style lang="less" scoped>
.card-container {
  background-color: white;
  padding: 0 20px 20px 20px;
}

.box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.package-card {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  border-radius: 15px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card-content {
  margin-top: 10px;
  margin-left: 15px;

  .title {
    font-weight: 700;
    font-size: 20px;
  }

  p {
    font-size: 16px;
  }
}
</style>
